<template>
<view>
   <view class="top">
	   <view class="search">
		   <image src="../../../static/remao_shop/img/Search_icon.png"></image>
			<input type="text" v-model="key" placeholder="商品搜索" :focus="focus" @focus="jujiaos" @change="Lists" />
	   </view>
      <!-- <van-search :value="value" placeholder="商品搜索" @search="onSearch" @change="Lists" :focus="focus" @focus="jujiaos"></van-search> -->
   </view>
   <view class="content-show" v-if="isShow == true">
      <view class="cent">
         <view class="cent-top">
            <text>历史记录</text>
            <image @tap="historyDelFn" v-if="lsList.length != 0" src="/static/remao_shop/img/delete.png"></image>
         </view>
         <view v-for="(item, index) in lsList" :key="index" focus="true" class="bott-cont">
            <view @tap="clicksls" :data-gid="index">
               <text>{{item}}</text>
            </view>
         </view>
         <view v-if="lsList.length == 0" class="cent-cont">
            <view class="zanwu">暂无搜索记录...</view>
         </view>
      </view>
      <view class="bott">
         <view class="bott-top">
            <text>热门搜索</text>
         </view>
         <view v-for="(item, index) in shopList" :key="index" class="bott-cont">
            <view @tap="clicksrm" :data-gid="index">
               <text>{{item.keywords}}</text>
            </view>
         </view>
      </view>
   </view>
   <!-- 搜索商品所有结果列表（无图） -->
   <!-- <view class='content-ss' wx:if="{{isShow == false}}">
      <view wx:for="{{Goodslist}}" wx:key="{{key}}">
         <view bindtap='productLists' data-gid='{{index}}'>
            {{item.goods_name}}
         </view>
      </view>
      <view class='zanwusp' wx:if="{{Goodslist.length == 0}}">暂无此类商品...</view>
   </view> -->
   <!-- 商品详细列表（有图） -->
   <view class="content-xq" v-if="xqShow">
      <view v-for="(item, index) in Goodslist" :key="index">
         <view class="cont-xqs" @tap="productList" :data-gid="index">
            <image :src="item.thumb_img"></image>
            <view class="con-bottom">
               <view class="name">{{item.goods_name}}</view>
               <view v-if="item.type == 1" class="money">￥{{item.price}}</view>
               <view v-if="item.type == 2" class="money">{{item.price}}积分</view>
            </view>
         </view>
      </view>
      <!-- 在无数据时不显示无图列表情况下仍然显示内容 -->
      <view class="zanwusp" v-if="Goodslist.length == 0">暂无此类商品...</view>
   </view>
</view>
</template>

<script>
import api from "../../../api";
var app = getApp();

export default {
  data() {
    return {
      focus: true,
      name: '',
      //当前缓存值
      lsList: [],
      //缓存数据
      shopList: [],
      //热门搜索数据
      isShow: true,
      //无图列表
      Goodslist: [],
      //商品数据
      value: '',
      //输入框内容
      xqShow: false,
      //有图列表
      chongfu: true //判断是否重复

    };
  },

  components: {},
  props: {},

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.getList();
    console.log(this.lsList), this.getLishi();
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {},

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {},

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {},

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {},

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    this.getList();
    wx.stopPullDownRefresh();
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {},

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {},
  methods: {
    //获取热门搜索
    getList: function () {
      app.globalData.request({
        url: api.default.related_list,
        header: {
          'content-type': 'application/x-www-form-urlencoded'
        },
        data: {
          id: 1
        },
        method: 'POST',
        success: res => {
          console.log(res);
          this.setData({
            shopList: res
          });
        }
      });
    },
    //搜索框中值改变时的事件
    Lists: function (event) {
      this.setData({
        isShow: false
      });
      console.log(event.detail);
      this.name = event.detail;

      if (event.detail == '') {
        this.setData({
          isShow: true,
          xqShow: false
        });
      } else {
        this.setData({
          isShow: false
        });
        this.searchList();
      }
    },
    //获取商品列表
    searchList: function () {
      app.globalData.request({
        url: api.default.search_good,
        header: {
          'content-type': 'application/x-www-form-urlencoded'
        },
        data: {
          name: this.name
        },
        method: 'POST',
        success: res => {
          console.log(res);
          this.setData({
            Goodslist: res
          });
        }
      });
    },
    // 获取缓存
    getLishi: function () {
      var that = this;
      wx.getStorage({
        key: 'history',
        success: function (res) {
          console.log(res);
          that.setData({
            lsList: res.data
          });
        }
      });
    },
    // 点击确认
    Listss: function (event) {
      console.log(event.detail);
      this.name = event.detail;

      if (event.detail != '') {
        this.searchList(); //获取商品列表

        this.search(); //添加搜索历史缓存

        this.getLishi(); //获取缓存，修改历史记录列表

        if (this.Goodslist.length != 0) {
          this.setData({
            xqShow: true
          });
        } else {
          this.setData({
            xqShow: false
          });
        }

        this.setData({
          //因为要隐藏掉无图搜索列表显示，所以有没有值都要点击确定时显示
          xqShow: true
        });
      }
    },
    //添加搜索历史缓存
    search: function () {
      this.setData({
        chongfu: true
      });
      this.getLishi(); //先调一遍缓存，循环判断是否有重复数据，如果有则不存

      var that = this;

      for (let i = 0; i < this.lsList.length; i++) {
        if (this.name == this.lsList[i]) {
          this.setData({
            chongfu: false
          });
        }
      }

      console.log(this.chongfu);

      if (this.chongfu == true) {
        var array = that.lsList;
        array.push(that.name);
        wx.setStorageSync('history', array);
      }
    },
    //清空历史记录
    historyDelFn: function () {
      var that = this;
      wx.showModal({
        title: '温馨提示',
        content: '是否清空历史记录',

        success(res) {
          if (res.confirm) {
            wx.clearStorageSync('history');
            that.setData({
              lsList: []
            });
          } else if (res.cancel) {
            console.log('用户点击取消');
          }
        }

      });
    },
    //点击历史记录标签搜索
    clicksls: function (event) {
      this.setData({
        focus: false
      });
      var that = this;
      setTimeout(function () {
        console.log(event.currentTarget.dataset.gid);
        var index = event.currentTarget.dataset.gid;
        console.log(that.lsList[index]);
        that.setData({
          value: that.lsList[index],
          name: that.lsList[index]
        });
        that.searchList(); //获取商品列表

        that.search(); //添加搜索历史缓存

        that.getLishi(); //获取缓存，修改历史记录列表

        that.setData({
          isShow: false,
          focus: true,
          xqShow: true
        });
      }, 100);
    },
    //点击热门搜索标签搜索
    clicksrm: function (event) {
      this.setData({
        isShow: false
      });
      console.log(event.currentTarget.dataset.gid);
      var index = event.currentTarget.dataset.gid;
      console.log(this.shopList[index].keywords);
      this.setData({
        value: this.shopList[index].keywords,
        name: this.shopList[index].keywords
      });
      this.searchList(); //获取商品列表

      this.search(); //添加搜索历史缓存

      this.getLishi(); //获取缓存，修改历史记录列表

      this.setData({
        isShow: false,
        focus: true,
        xqShow: true
      });
    },
    //输入框聚焦时触发
    jujiaos: function () {},
    //点击取消按钮
    onCancel: function () {
      wx.navigateBack({
        delta: 1
      });
    },
    //点击商品进入详情页
    productList: function (event) {
      console.log(event.currentTarget.dataset.gid);
      var index = event.currentTarget.dataset.gid;
      console.log(this.Goodslist[index].type);

      if (this.Goodslist[index].type == 1) {
        console.log(this.Goodslist[event.currentTarget.dataset.gid].goods_id);
        wx.navigateTo({
          url: '../../packageA/rushdetails/rushdetails?goods_id=' + this.Goodslist[event.currentTarget.dataset.gid].goods_id + '&img=' + this.Goodslist[event.currentTarget.dataset.gid].thumb_img
        });
      } else if (this.Goodslist[index].type == 2) {
        wx.navigateTo({
          url: '../../packageB/IntegralDetailsOfCommodities/IntegralDetailsOfCommodities?integral_id=' + this.Goodslist[event.currentTarget.dataset.gid].goods_id
        });
      }
    },
    //点击列表进图片页添加缓存
    productLists: function (event) {
      console.log(this.Goodslist[event.currentTarget.dataset.gid].goods_name);
      this.setData({
        xqShow: true,
        name: this.Goodslist[event.currentTarget.dataset.gid].goods_name
      });
      this.search();
      this.getLishi(); //获取缓存，修改历史记录列表
    }
  }
};
</script>
<style>
@import "./search.css";
.top {
	width: 100%;
	height: 110upx;
	display: flex;
	justify-content: center;
	align-items: center;
	box-sizing: border-box;
	padding: 20upx 32upx;
	background: #fff;
}

.top .search {
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	background: #f7f8fa;
	border-radius: 4upx;
	padding-left: 20upx;
	box-sizing: border-box;
}

.top .search image {
	width: 30upx;
	height: 30upx;
	margin-right: 10upx;
}

.top .search input {
	color: #999;
	width: 100%;
	line-height: 1;
	text-align: left;
	font-size: 28upx;
}
</style>